<template>
	<view class="cg-popup">
		<u-popup @close="onClose" :zIndex="zIndex" :overlayStyle="overlayMergeStyle" :round="round" :show="value"
			@open="open" :mode="mode" :safeAreaInsetBottom="safeAreaInsetBottom" :customStyle="customStyle"
			:overlayOpacity="overlayOpacity">
			<view class="cg-popup-content" :style="{width:width}">
				<slot></slot>
				<view class="cg-close-icon" @click="onClose" v-if="showClose">
					<u-icon name="close-circle" color="#ffffff" size="36"></u-icon>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		options: {
			styleIsolation: 'shared' // 关闭样式隔离
		},
		props: {
			overlayOpacity: {
				default: 0.5,
				type: Number
			},
			zIndex: {
				default: 999,
				type: Number | String
			},
			overlayStyle: {
				default: () => {
					return {
						zIndex: '998'
					}
				},
				type: Object
			},
			width: {
				default: '100%',
				type: String
			},
			mode: {
				default: 'bottom',
				type: String
			},
			value: {
				default: false,
				type: Boolean
			},
			round: {
				type: Number | String,
				default: 0
			},
			showClose: {
				default: false,
				type: Boolean
			},
			safeAreaInsetBottom: {
				default: true,
				type: Boolean
			},
			customStyle: {
				default: '',
				type: String
			}
		},
		data() {
			return {

			}
		},
		computed: {
			overlayMergeStyle() {
				const style = {
					'z-index': Number(this.zIndex) - 1
				}
				return uni.$u.deepMerge(style, uni.$u.addStyle(this.overlayStyle))
			}
		},
		methods: {
			open() {
				// console.log('open');
			},
			onClose() {
				this.$emit('input', false);

				this.$emit('close')
			}
		}
	}
</script>

<style lang="scss">
	.cg-popup {

		::v-deep .u-popup__content {
			background-color: transparent;
		}

		.cg-popup-content {
			position: relative;
			background-color: transparent;
			border-radius: 20rpx;


			.cg-close-icon {
				position: absolute;
				left: calc(50% - 18px);
				bottom: -120rpx;
			}
		}
	}
</style>